import { useLayoutEffect } from 'react';

const FZY = () => {
  const [count, setCount] = useState(0);
  // useEffect(() => {
  //   for (let i = 0; i < 100; i++) {
  //     setCount((count) => count + 1);
  //   }
  // }, [])
  useLayoutEffect(() => {
    for (let i = 0; i < 100; i++) {
      setCount((count) => count + 1);
    }
  }, []);
  return (
    <div>
      <h3>useEffect 和 useLayoutEffect 的区别</h3>
      <div>
        useEffect 和 useLayoutEffect 都是 React Hooks
        中的一个函数，它们都是用来在组件渲染之后执行一些操作的。
        但是它们在渲染过程中执行的时机有所不同。 useEffect
        在组件渲染之后，浏览器渲染之前执行，而 useLayoutEffect
        在浏览器渲染之前执行。 因此，useLayoutEffect
        可以在组件渲染之前获取到最新的 DOM 节点，而 useEffect 则不能。
        此外，useLayoutEffect 会阻塞浏览器渲染，而 useEffect 不会。
      </div>
      <br />
      {Array.from({ length: count }).map((_: unknown, index: number) => {
        return <div key={index}>{index}</div>;
      })}
    </div>
  );
};
export default FZY;
